<template>
	<div :class="['app-raw-item', 'app-raw', `app-raw-${name}`]">
		<div class="raw-caption" v-if="caption" :style="rawStyle">
			{{ caption }}
		</div>
		<div v-if="Object.is(contentType, 'RAW')">
			<span :style="rawStyle">{{ getContentValue }}</span>
		</div>
		<div
			v-else-if="Object.is(contentType, 'HTML')"
			v-html="getContentValue"
			:style="rawStyle"
		/>
		<div v-else-if="Object.is(contentType, 'IMAGE')" :style="rawStyle">
			<a-image v-if="imgPath" :src="imgPath" />
			<i v-else :style="rawStyle" :class="iconClass ? iconClass : ''"></i>
		</div>
		<template v-else-if="Object.is(contentType, 'MARKDOWN')">
			<AppMarkDown
				:style="rawStyle"
				mode="preview"
				:value="value"
			></AppMarkDown>
		</template>
		<template v-else-if="Object.is(contentType, 'PLACEHOLDER')">
			<!-- 占位 -->
			<div :style="sizeStyle"></div>
		</template>
		<template v-else-if="Object.is(contentType, 'VIDEO')">
			<!-- 视频 -->
			<div class="app-rawitem__video">
				<video
					:src="videoParams.path"
					:autoplay="videoParams.autoplay"
					:controls="videoParams.showcontrols"
					:loop="videoParams.replay"
					:muted="videoParams.mute"
				>
					<source :src="videoParams.path" type="video/mp4" />
					<source :src="videoParams.path" type="video/ogg" />
					<source :src="videoParams.path" type="video/webm" />
				</video>
			</div>
		</template>
		<template v-else-if="Object.is(contentType, 'DIVIDER')">
			<a-divider :orientation="dividerParams.contentPosition">
				<span v-html="dividerParams.html"></span>
			</a-divider>
		</template>
		<template
			v-else-if="
				Object.is(contentType, 'WARNING') ||
				Object.is(contentType, 'INFO') ||
				Object.is(contentType, 'ERROR')
			"
		>
			<a-alert
				class="app-raw-alert"
				:message="alertParams.title"
				:type="contentType.toLowerCase()"
				:closable="alertParams.closeabled"
				:showIcon="alertParams.showIcon"
			/>
		</template>
	</div>
</template>

<script setup lang="ts">
import { rawProps, renderModeType } from './raw';
import { useEditorTypeParams } from '@/hooks/use-editor';
const props = defineProps(rawProps);
// 类型校验
const { validateConfig } = useEditorTypeParams();
validateConfig();
const classNames = computed(() => {
	if (props.rawItemDetail && props.rawItemDetail.renderMode) {
		return `render-mode--${props.rawItemDetail.renderMode.toLowerCase()}`;
	}
});
const rawStyle =
	props.rawItemDetail && props.rawItemDetail.rawStyle
		? props.rawItemDetail.rawStyle
		: '';
//直接内容
let getContentValue = computed(() => {
	let content = props.value || '';
	if (content) {
		const items = content.match(/\{{(.+?)\}}/g);
		if (items) {
			const { context, viewParams, data } = props;
			console.log(context, viewParams, data);
			items.forEach((item: string) => {
				content = content.replace(
					/\{{(.+?)\}}/,
					eval(item.substring(2, item.length - 2))
				);
			});
		}
		content = content.replaceAll('&lt;', '<');
		content = content.replaceAll('&gt;', '>');
		content = content.replaceAll('&amp;nbsp;', ' ');
		content = content.replaceAll('&nbsp;', ' ');
	}
	return content;
});
</script>
